
<template>
  <div class="tree-menusabc">
    <div v-for="item in data" :key="item.id" :class="`tree-menu${item.type}`">
      <div
        class="tree-node"
        :class="[
          { 'has-children': item.chapterList && item.chapterList.length },
          `level-${item.type}`
        ]"
        @click.stop="toggleNode(item)"
      >
        <div class="node-content">
          <el-icon v-if="hasChildren(item)" class="expand-icon" @click.stop="toggleExpand(item)">
            <CaretRight v-if="!item.expanded" />
            <CaretBottom v-else />
          </el-icon>
          <span>{{ item.title }}</span>
        </div>
        <div class="button-group" @click.stop>
          <el-button v-if="item.type == 1" @click="addTree(1,item)">新增章节</el-button>
          <el-button v-if="item.type == 2" @click="addTree(2,item)">新增视频</el-button>
          <el-button v-if="item.type == 3" @click="addTree(3,item)">查看视频</el-button>
        </div>
      </div>
      <TreeMenu
        v-if="item.chapterList ? (item.chapterList && item.chapterList.length && item.expanded) : (item.videoList && item.videoList.length && item.expanded)"
        :data="item.videoList ? item.videoList : item.chapterList"
        @node-click="$emit('node-click', $event)"
        @menuAddVideo="(type, item) => $emit('menuAddVideo', type, item)"
        @menuType="(type, item) => $emit('menuType', type, item)"
      />
    </div>
  </div>
</template>

<script setup>
import { CaretRight, CaretBottom } from '@element-plus/icons-vue'

import { ref } from 'vue'

const props = defineProps({
  data: {
    type: Array,
    required: true
  },
  menuType:{
    type: Function
  },
})


const toggleAll = (checked) => {
  const toggleNode = (nodes) => {
    if (!nodes) return
    nodes.forEach(node => {
      node.expanded = !checked
      if (node.chapterList) {
        toggleNode(node.chapterList)
      }
      if (node.videoList) {
        toggleNode(node.videoList)
      }
    })
  }
  toggleNode(props.data)
}

const emit = defineEmits(['node-click','menuType','menuAddVideo'])

const toggleNode = (item) => {
    emit('node-click', item)
}
const addTree = (type,item) => {
  console.log(type)
    emit('menuType', type,item)
}
// const addTreeVideo = (type,item) => {
//   console.log(type)
//     emit('menuAddVideo', type,item)
// }

const hasChildren = (item) => {
  return (item.chapterList && item.chapterList.length) || (item.videoList && item.videoList.length)
}

const toggleExpand = (item) => {
  item.expanded = !item.expanded
}
defineExpose({
  toggleAll
})
</script>

<style scoped>
.tree-header {
  padding: 10px;
  border-bottom: 1px solid #eee;
  margin-bottom: 10px;
}
.tree-menu1 {
  list-style: none;
  margin-left: 10px;
  margin-right: 10px;
}
.tree-menu2 {
  list-style: none;
  margin-left: 40px;
}
.tree-menu3 {
  list-style: none;
  margin-left: 50px;
}

.tree-node {
  line-height: 30px;
  padding: 8px 10px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 6px;
  margin: 5px 0;
}

.has-children {
  font-weight: bold;
}

/* 第一层级样式 */
.level-1 {
  background-color: #dbeafe ;
  color: #3258c3;
}
.level-1:hover {
  background-color: #eff6ff;
}

/* 第二层级样式 */
.level-2 {
  background-color: #dcfce7 ;
  color: #1b6939;
}
.level-2:hover {
  background-color: #eff6ff ;
}

/* 第三层级样式 */
.level-3 {
  background-color: #f3e8ff ;
  color: #7535b1;
}
.level-3:hover {
  background-color: #eff6ff;
}

.node-content {
  display: flex;
  align-items: center;
  gap: 8px;
}

.expand-icon {
  cursor: pointer;
  transition: transform 0.3s;
}

.expand-icon:hover {
  color: var(--el-color-primary);
}
</style>
